<template>
  <div class="popups" @click="hides($event,2)">
    <div class="content" @click="stopPropagation">
      <div class="bgs">
        <div class="cols" ><img src="./img/clos.png" alt="" @click="hides"></div>
        <div class="container">
          <div class="container-inner">
            <div class="content">
              <div class="red-count">
                ￥<span class="num">{{red_count}}</span>
              </div>
              <div class="red-desc" v-for="desc in red_desc.split(' ')">
                {{desc}}
              </div>
            </div>
            <div class="bottom">
            </div>
          </div>
        </div>
      </div>
      <div class="bottom-content">
        <div class="tips">仅用于购买「十分读书」会员</div>
        <div class="use" @click="buyVip">
          <div class="use-text">立即使用</div>
          <div class="use-num">（限额50名）</div>
        </div>
      </div>
      <img class="bottom-img" src="./img/bottomImg.png" />
    </div>
  </div>
</template>

<script>
  export default {
    name: "index",
    data:function(){
      return {
      }
    },
    props: ['red_count','red_desc'],
    methods: {
      hides: function (e) {
        if (e && e.stopPropagation) {
          e.stopPropagation();
        } else {
          window.event.cancelBubble = true
        }
        this.$emit('hide')
      },
      buyVip: function (e) {
        if (e && e.stopPropagation) {
          e.stopPropagation();
        } else {
          window.event.cancelBubble = true
        }
        this.$emit('buyVip')
      },
      stopPropagation: function (e) {
        if (e && e.stopPropagation) {
          e.stopPropagation();
        } else {
          window.event.cancelBubble = true
        }
        return false
      }
    },
  }
</script>

<style scoped>
  @import "./css/index.css";
</style>
